<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
          <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
            x="0" y="0" width="100" height="100"/>
       
    </svg>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="filter1" >
              <feColorMatrix in="SourceGraphic"
                type="matrix"
                values="
                  1 0 0 0 .2
                  0 1 0 0 .2
                  0 0 1 0 .2
                  0 0 0 1 .2
                ">
                  <!-- <animate attributeType="XML"
                    attributeName="values"
                    to="
                    -.5 2 -.5 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    0 0 0 1 0
                    "
                    dur="5s"
                    repeatCount="1"
                    fill="freeze"
                    /> -->
                </feColorMatrix>
      
                <feComponentTransfer >
                  <!-- <feFuncR type="linear" slope="1.5" intercept=".05"/>
                  <feFuncG type="linear" slope="1.5" intercept=".05"/>
                  <feFuncB type="linear" slope="1.5" intercept=".05"/> -->
                  <!-- <feFuncR type="table" tableValues="0.0 0.8 1.0"/>
                  <feFuncG type="table" tableValues="0.0 0.8 1.0"/>
                  <feFuncB type="table" tableValues="0.0 0.8 1.0"/> -->
              </feComponentTransfer>
            </filter>
          </defs>
      
          <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
            x="0" y="0" width="100" height="100" filter="url(#filter1)"/>
       
    </svg>

    
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="filter2" >
              <feColorMatrix in="SourceGraphic"
                type="hueRotate"
                values="180">
                </feColorMatrix>               
            </filter>
          </defs>
      
          <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
            x="0" y="0" width="100" height="100" filter="url(#filter2)"/>
       
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="filter3" >
              <feColorMatrix in="SourceGraphic"
                type="luminanceToAlpha"
                values="1">
                </feColorMatrix>
      
                
            </filter>
          </defs>
      
          <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
            x="0" y="0" width="100" height="100" filter="url(#filter3)"/>
       
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="filter4" >
              <feColorMatrix in="SourceGraphic"
                type="saturate"
                values="1">
                </feColorMatrix>
      
                
            </filter>
          </defs>
      
          <image id="img1" href="https://img0.baidu.com/it/u=2381213954,401093073&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=281"
            x="0" y="0" width="100" height="100" filter="url(#filter4)"/>
       
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="filter5" >
              <feColorMatrix in="SourceGraphic"
              type="matrix"
              values="
                1 0 0 0 0
                0 1 0 0 0
                0 0 1 .5 0
                0 0 0 1 0
              ">
                </feColorMatrix>
      
                
            </filter>
          </defs>
      
          <image id="img1" href="../imgs/7.png"
            x="0" y="0" width="100" height="100" filter="url(#filter5)"/>
       
    </svg>


    <script src="index.js"></script>
</body>
</html>